<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="500px"
    :close-on-click-modal="false"
    :before-close="cancel"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
      style="height: 400px; overflow-y: auto"
    >
      <el-form-item label="标签名称" prop="labelName">
        <el-input
          v-model="form.labelName"
          maxlength="20"
          show-word-limit
          placeholder="请输入标签名称"
        />
      </el-form-item>
      <el-form-item label="标签类型" prop="labelType">
        <el-radio-group v-model="form.labelType" @change="changeType">
          <el-radio :label="1">手动标签</el-radio>
          <el-radio :label="2">自动标签</el-radio>
        </el-radio-group>
      </el-form-item>
      <div v-if="form.labelType === 2">
        <div class="title">满足以下任意条件即可</div>
        <el-form-item label="请选择" prop="conditions">
          <el-checkbox-group v-model="form.conditions">
            <el-checkbox label="lastDealTime">最后消费时间</el-checkbox>
            <el-checkbox label="dealCount">累计消费次数</el-checkbox>
            <el-checkbox label="dealAmount">累计消费金额</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          v-if="form.conditions.includes('lastDealTime')"
          label="最后消费时间"
          prop="lastDealTime"
        >
          <el-select v-model="form.lastDealTime" placeholder="请选择">
            <el-option label="近一周" value="近一周" />
            <el-option label="近一个月" value="近一个月" />
            <el-option label="近三个月" value="近三个月" />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="form.conditions.includes('dealCount')"
          label="累计消费次数"
          prop="dealCount"
        >
          <el-input-number
            v-model="form.dealCount"
            :min="1"
            controls-position="right"
          />
          <span class="unit">次</span>
        </el-form-item>
        <el-form-item
          v-if="form.conditions.includes('dealAmount')"
          label="累计消费金额"
          prop="dealAmount"
        >
          <el-input-number
            v-model="form.dealAmount"
            :min="1"
            controls-position="right"
          />
          <span class="unit">元</span>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { addTips, getTipsById, updateTips } from '@/api/memberApi'

const emit = defineEmits(['reset'])
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formRef = ref(null)
const isAdd = ref(true)

class AddForm {
  constructor() {
    this.labelName = '' // 标签名称
    this.labelType = 1 // 标签类型 1-手动标签 2-自动标签
    this.conditions = [] // 达标条件
    this.lastDealTime = '' // 最后消费时间
    this.dealCount = null // 累计消费次数
    this.dealAmount = null // 累计消费金额
    this.buyerLabelId = null // 标签id
  }
}

const form = reactive(new AddForm())

const rules = {
  labelName: [
    { required: true, message: '请输入标签名称', trigger: 'blur' }
  ],
  labelType: [
    { required: true, message: '请选择标签类型', trigger: 'change' }
  ],
  conditions: [
    { required: true, message: '请至少选择一个条件', trigger: 'change' }
  ],
  lastDealTime: [
    { required: true, message: '请选择最后消费时间', trigger: 'change' }
  ],
  dealCount: [
    { required: true, message: '请输入累计消费次数', trigger: 'blur' }
  ],
  dealAmount: [
    { required: true, message: '请输入累计消费金额', trigger: 'blur' }
  ]
}

// 显示弹窗
const show = async (row) => {
  dialogVisible.value = true
  if (row) {
    // 编辑
    isAdd.value = false
    dialogTitle.value = '编辑标签'
    const res = await getTipsById(row)
    Object.assign(form, res.data)
  } else {
    // 新增
    isAdd.value = true
    dialogTitle.value = '新建标签'
    Object.assign(form, new AddForm())
  }
}

// 取消
const cancel = () => {
  dialogVisible.value = false
  formRef.value.resetFields()
}

// 保存
const save = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      let res = null
      if (isAdd.value) {
        // 新增
        res = await addTips(form)
      } else {
        // 编辑
        res = await updateTips(form)
      }
      if (res.code === '') {
        ElMessage.success(isAdd.value ? '新增成功' : '编辑成功')
        cancel()
        emit('reset')
      }
    }
  })
}

// 切换标签类型
const changeType = (val) => {
  if (val === 1) {
    form.conditions = []
    form.lastDealTime = ''
    form.dealCount = null
    form.dealAmount = null
  }
}

defineExpose({
  show
})
</script>

<style lang="scss" scoped>
.title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
.unit {
  margin-left: 10px;
}
</style>